<template>
    <div class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline search-box">
                <label class="layui-form-label">查看站点排期</label>
                <div class="layui-input-inline">
                    <select name="site">
                        <option value="">全部站点</option>
                        <option v-for="site in siteData" value="site.id">{{site.name}}</option>
                    </select>
                </div>
            </div>
            
            <div class="layui-inline">
                <div class="layui-input-inline" style="width: 400px;">
                    <input type="text" name="title" required  lay-verify="required" placeholder="请输入品牌商名称(必须在库内)" autocomplete="on" class="layui-input">
                </div>
            </div>
            <div class="layui-inline"><button class="layui-btn">搜索</button></div>
            <div @click="addPlan()" class="layui-inline"><button class="layui-btn layui-btn-primary">新建排期</button></div>
        </div>
        <table class="layui-table schedule-table-data">
            <thead>
                <tr><th v-for="week in scheduleTableData.thead">{{week}}</th></tr> 
            </thead>
            <tbody>
                <tr><td v-for="item in scheduleTableData.tbody">{{item.planDate}}<div class="text">{{item.siteName}}:{{item.channelName}}</div></td></tr>
            </tbody>
        </table>
    </div>
</template>
<script>
    export default{
        name: 'pandect',
        data: function () {
            return {
                siteData: [
                    {id: 1, name: "简单生活"},
                    {id: 2, name: "简优Life"}
                ],
                scheduleTableData: {
                    thead: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    tbody: [
                    {
                        "planDate": "2017-10-10",//#排期日期
                        "siteId": 2,//#站点ID
                        "siteName": "简优Life",//#站点名称
                        "siteTotalProduct": 21,//#站点每日总产能
                        "channelId": 5,//#渠道ID
                        "channelName": "达人平台a",//#渠道名称
                        "channelDayTotal": 9,//#渠道每日总量
                        "leftTotal": 8,//#剩余总量
                        "hasPlaned": 1,//#已排期数量
                        "leftProductCount": -42.2//#剩余产能
                    },
                    {
                        "planDate": "2017-10-11",
                        "siteId": 2,
                        "siteName": "简优Life",
                        "siteTotalProduct": 21,
                        "channelId": 4,
                        "channelName": "有好货",
                        "channelDayTotal": 30,
                        "leftTotal": 28,
                        "hasPlaned": 2,
                        "leftProductCount": -42.2
                    },
                    {
                        "planDate": "2017-10-11",
                        "siteId": 2,
                        "siteName": "简优Life",
                        "siteTotalProduct": 21,
                        "channelId": 5,
                        "channelName": "达人平台a",
                        "channelDayTotal": 9,
                        "leftTotal": 8,
                        "hasPlaned": 1,
                        "leftProductCount": -42.2
                    },
                    {
                        "planDate": "2017-10-11",
                        "siteId": 4,
                        "siteName": "站点2",
                        "siteTotalProduct": 11,
                        "channelId": 5,
                        "channelName": "达人平台a",
                        "channelDayTotal": 9,
                        "leftTotal": 7,
                        "hasPlaned": 2,
                        "leftProductCount": -22.200000000000003
                    },
                    {
                        "planDate": "2017-10-12",
                        "siteId": 4,
                        "siteName": "站点2",
                        "siteTotalProduct": 11,
                        "channelId": 4,
                        "channelName": "有好货",
                        "channelDayTotal": 30,
                        "leftTotal": 29,
                        "hasPlaned": 1,
                        "leftProductCount": -22.200000000000003
                    }
                ]},
                scheduleTableData1: {
                    thead: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    tbody: [
                        {date: '2017-10-01', content: '111111111111111111'},
                        {date: '2017-10-01', content: '111111111111111111'},
                        {date: '2017-10-01', content: '111111111111111111'},
                        {date: '2017-10-01', content: '111111111111111111'},
                        {date: '2017-10-01', content: '111111111111111111'},
                        {date: '2017-10-01', content: '111111111111111111'},
                        {date: '2017-10-01', content: '111111111111111111'}
                    ]
                }
            }
        },
        methods: {
            addPlan: function(){
                var me = this;
                me.layui_layer.open({
                    title: '新建排期',
                    type:2,
                    area: ['850px', '465px'],
                    anim: 5,
                    shadeClose: false, //点击遮罩关闭
                    content: '#/add_plan',
                    success: function(layero, index){
                        console.info(layero[0].className)
                    },
                    yes: function(){}
                });
            }
        },
        //html 生成完成
        mounted: function(){
            var me = this;
            layui.use(['form', 'layer', 'laydate'], function(){
                me.layui_form = layui.form;
                me.layui_layer = layui.layer;
                me.layui_form.render();
            });
            
            axios.get('/plan/global').then(function(res){
                console.log(me.siteData);
            }).catch(function(err){
                console.log(err);
            });
        }
    }
</script>
<style>
.layui-form-label{width: 90px;}
.schedule-table-data .text{margin: 9px -15px; padding: 9px 15px 0; border-top: 1px solid #ddd;}
.add-site-box{padding: 20px;}
.add-site-box .layui-input-inline{width: 240px;}
</style>
